import type { CardListProps } from './types.ts'
import React from 'react'
import Carousel from '../carousel/carousel.tsx'
import './goods-card-list-2.scss'

const GoodsCardList: React.FC<CardListProps> = ({
  dataList = [],
  maxSales = 5000,
  onClick = () => {},
}) => {
  return (
    <>
      <div
        className="card-list-goods__container"
      >
        {dataList.map(item => (
          <div
            key={item.key}
            className="card-list-goods__item"
            onClick={() => onClick(item)}
          >
            {
              item.imageList && item.imageList.length > 0 && (
                <div className="card-list-goods__image">
                  <Carousel
                    images={item.imageList}
                    interval={3000}
                  />
                </div>
              )
            }
            <div className="card-list-goods__content">
              <div className="card-list-goods__title">{item.title}</div>
              <div className="card-list-goods__desc">{item.desc}</div>
              <div className="card-list-goods__bottom">
                <div className="card-list-goods__unit">￥</div>
                <div className="card-list-goods__price">{item.activePrice || item.price}</div>
                {
                  item.activePrice && <div className="card-list-goods__unit__delete">￥</div>
                }
                {
                  item.activePrice && <div className="card-list-goods__price__delete">{item.price}</div>
                }
                <div className="card-list-goods__sales">
                  已售
                  {item.sales > maxSales ? `${maxSales}+` : item.sales}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  )
}

GoodsCardList.displayName = 'GoodsCardList'
export default GoodsCardList
